<!--
 * @Author: sansuixiaoxianxian 1634119605@qq.com
 * @Date: 2025-07-02 16:06:06
 * @LastEditors: sansuixiaoxianxian 1634119605@qq.com
 * @LastEditTime: 2025-07-10 16:24:55
 * @FilePath: /travel-record-library/src/pages/home.vue
 * @Description: HBubilder使用MuMu模拟器进行手机模拟。https://blog.csdn.net/H524268015wsw/article/details/131992091
-->
<template>
	<Page title="首页">
		<template #body>
			<van-grid :column-num="2" :gutter="20" :border="false" class="main_grid">
				<van-grid-item v-for="(item, index) in route" :key="item.name">
					<button :class="['btn', `btn-${getButtonClass(index)}`]" @click="toRoute(item.name)">
						<i :class="item.icon"></i>
						{{ item.title }}
					</button>
				</van-grid-item>
			</van-grid>
		</template>
	</Page>
</template>

<script setup lang="ts" name="index">
import useRouterStore from "@/store/useRouterStore"

const getButtonClass = (index: number) => {
	const classes = ['add', 'record', 'personnel', 'location', 'transport', 'system'];
	return classes[index] || 'system';
};

const router = useRouterStore()

const route = [
	{
		title: "添加出差记录",
		name: "AddTravelRecord",
		icon: "fas fa-plus-circle"
	},
	{
		title: "出差记录管理",
		name: "TravelRecordManagement",
		icon: "fas fa-clipboard-list"
	},
	{
		title: "出差人员管理",
		name: "TravelPeopleManagement",
		icon: "fas fa-users"
	},
	{
		title: "出差地址管理",
		name: "TravelAddressManagement",
		icon: "fas fa-map-marker-alt"
	},
	{
		title: "交通费用管理",
		name: "LumpSumCarFareManagement",
		icon: "fas fa-bus"
	},
	{
		title: "系统数据管理",
		name: "SystemDataManagement",
		icon: "fas fa-cog"
	},
]

const toRoute = (pathName: string) => {
	router.navigateTo({
		pathName,
	})
}
</script>

<style scoped lang="scss">
$primary-700: #1a56db;
$primary-600: #2563eb;
$primary-500: #3b82f6;
$primary-400: #60a5fa;
$primary-300: #93c5fd;
$primary-200: #bfdbfe;
$dark-color: #1f2937;
$light-color: #f9fafb;

.main_grid {
	margin-top: 20px;

	::v-deep(.van-grid-item__content) {
		background: none;
		padding: 0;
	}

	.btn {
		padding: 10px;
		font-size: 16px;
		font-weight: bold;
		color: white;
		border-radius: 12px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		border: none;
		height: 120px;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		i {
			font-size: 35px;
			margin-bottom: 10px;
		}
	}

	.btn-add {
		background: linear-gradient(135deg, $primary-700, $primary-600);
	}

	.btn-record {
		background: linear-gradient(135deg, $primary-600, $primary-500);
	}

	.btn-personnel {
		background: linear-gradient(135deg, $primary-500, $primary-400);
	}

	.btn-location {
		background: linear-gradient(135deg, $primary-400, $primary-300);
		color: $dark-color;
	}

	.btn-transport {
		background: linear-gradient(135deg, $primary-300, $primary-200);
		color: $dark-color;
	}

	.btn-system {
		background: linear-gradient(135deg, #4b5563, #6b7280);
	}
}
</style>
